<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>接送机包车发布</title>
	<meta name="decorator" content="default"/>
	<style>
	.label{height:30px;line-height:30px;text-size:20px;cursor:pointer;}
	.fenge{margin-left:5px;margin-right:5px;}
	</style>
	<script type="text/javascript">
	var productRowIdx = 0, productTpl = 'productTpl';	
		$(document).ready(function() {		
			var dataBoard = ${fns:toJson(tRentgroup.productList)};

			for (var i=0; i<dataBoard.length; i++){
				addRow('#productList', i, productTpl, dataBoard[i] );
				productRowIdx = productRowIdx + 1;
			}
				// 选择线路时，自动	写车型和站点信息
				$('#line').bind('change',function(){
					$option = $(this).find('option:selected');
					$('#cargotypeId').val($option.attr('data-cargotypeid'));
					$('#cargotypeName').val($option.attr('data-typename'));
					$('#departcityId').val($option.attr('data-departcitySiteid'));
					$('#departcityName').val($option.attr('data-departcitySiteName'));
					$('#destcityId').val($option.attr('data-destcitySiteid'));
					$('#destcityName').val($option.attr('data-destcitySiteName'));
				});
				$('#line').trigger('change'); // 默认时候这超公里数收费金额
				if ($('#line').val() == "")
					$('#productname').val("");
				$("#inputForm").validate({
					submitHandler: function(form){
						loading('正在提交，请稍等...');
						form.submit();
					},
					errorContainer: "#messageBox",
					errorPlacement: function(error, element) {
						$("#messageBox").text("输入有误，请先更正。");
						if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
							error.appendTo(element.parent().parent());
						} else {
							error.insertAfter(element);
						}
					}
				});
				// 比例规则
				$.validator.addMethod("percent", function(value, element) {
					var reg = /^[0-9]+(.[0-9]{2})?$/;
					if(value == '' || (!isNaN(value) && value>0 && value<=100 && reg.test(value) )){
						return true;
					} else {
						return false;
					}
				}, "比例不合法");
				
				// 正整数
				$.validator.addMethod("positive", function(value, element) {
					if(value<=0){
						return false;
					}else {
						return true;
					}
				}, "不能为0");
				
				// 出发城市不能与到达城市相同
				$.validator.addMethod("sameCity", function(value, element) {
					var departcity = $('#departcity').val();
					var destcity = $('#destcity').val();
					if(departcity == destcity){
						return false;
					} 
					return true;
				}, "出发城市不能与到达城市相同");

/* 			<c:if test="${not empty tRentgroup.rentgrpid}">
				$("input").prop("disabled", true);
				$("select").prop("disabled", true);
				$('input[name=iselectric]').change();
				$('input[name=isall]').change();
			</c:if> */
		});
		
		function addRow(list, idx, tpl, row){
			//var datalist = {"list":row};
			var data;
			//var schetype = document.getElementById("schetype").value;
			if(row) { // 加载后台的有默认值
				data = {idx: idx, delBtn: true, row:row};
						
				var num=$("#productList tr").length;
				var prefix = list + num;
				
				rendercartype(prefix, row.cargotype.cargotypeid);
				//keypress(row.cargotype.cargotypeid,prefix)
			} else { 
				// 新增的是没有默认值的
				//获取当前动态行的行数
				//上客点
				var num;
				var count;
				
				num = $("#productList tr").length;
				count = num + 1;
				$("#productnum").val(count);
				var prefix = list + idx;
				rendercartype(prefix);
				data = {idx: idx, delBtn: true};
			}
			 //查询保存的上下客点信息
			var html = template(tpl, data); // 渲染模板
			
			$(list).append(html);
			$(list+idx).find("select").each(function(){
				var $this = $(this);
				var $option = $this.find("option[selected='selected']");
				$this.select2();
				if($option[0]) {
					$this.select2('val',$option.val());
				}
				//$(this).val($(this).attr("data-value"));
				//$(this).find("option[selected='selected']").attr("selected",'selected'); 
			});
		}
		function rendercartype(prefix,cargotypeid) {
			var cargotypehtml = prefix+"_cargotype";
			
			url = "${ctx}/rentproduct/tRentgroup/getallcartype";
			$.ajax({
				url:url,
				type: 'POST',
				cache:false,
				success: function(data) {
					var obj = data;
					if(obj!=null){
						var html = '';
						var cargotypes='';
						jQuery(cargotypehtml).html('');
						$.each(obj, function (i, item) {
							var select = '';
							
							if (cargotypeid != null){
								select = checkcargotype(cargotypeid, item.cargotypeid)?"selected=selected":"";
							}
							else{
								select = "";
							}
							cargotypes =  "<option value='"+'' +"' >"+ '--请选择--'+"</option>" ;
							html += "<option value='"+ item.cargotypeid+"' "+select+">"+ item.typename+"</option>";
						}); 
						var htmls = cargotypes +html;
						var $cargotype = $(cargotypehtml);
						$cargotype.html(htmls);
						var $option = $cargotype.find("option[selected='selected']");
						$cargotype.select2();
						if($option[0]) {
							$cargotype.select2('val',$option.val());
						}
					}
				},
				error: function() {
					alert("数据有误");
				}
			});		
		}
		function checkcargotype(dataid, cargotypeid){
			if(dataid==cargotypeid){
				return true;
			}
			return false;
		}
		function delRow(obj, prefix, list){
			var id = $(prefix+"_id");
			var delFlag = $(prefix+"_delFlag");
			if (id.val() == ""){
				$(obj).parent().parent().remove();
			}else if(delFlag.val() == 0){
				delFlag.val("1");
				$(obj).html("&divide;").attr("title", "撤销删除");
				$(obj).parent().parent().addClass("error");
			}else if(delFlag.val() == 1){
				delFlag.val("0");
				$(obj).html("&times;").attr("title", "删除");
				$(obj).parent().parent().removeClass("error");
			}
			var num;
			num=$("#productList tr").length;
			$("#productnum").val(num); 
		}
		//通过汽车车牌号显示汽车信息
		function keypress(cargotypeid,prefix){
			var seats = prefix+"_seats";
			var packs = prefix+"_packs";
			
			
			url = "${ctx}/rentproduct/tRentgroup/ajaxList";
			$.ajax({
		          dataType: 'json',
		          url:url,
		          data:{cargotypeid:cargotypeid},
		          type: 'POST',
		          success: function(data) {
		            var obj = eval(data);
		            	
		            $(seats).val(obj[0].seats);
		            $(packs).val(obj[0].packs);
		      
		           },
		            error: function() {
		            		 alert("数据有误");
		            }
		        });     
		}
		function chgname(linename) {
			$("#productname").val(linename+"包车");
		}
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/rentproduct/tRentgroup/planeList">接送机包车列表</a></li>
		<li class="active">
			<a href="${ctx}/rentproduct/tRentgroup/planeForm?rentgrpid=${tRentgroup.rentgrpid}">接送机包车<shiro:hasPermission name="rentproduct:tRentgroup:edit">${not empty tRentgroup.rentgrpid?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="rentproduct:tRentgroup:edit">查看</shiro:lacksPermission></a>
		</li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="tRentgroup" action="${ctx}/rentproduct/tRentgroup/planeSave" method="post" class="form-horizontal">
		<form:hidden path="rentgrpid"/>
		<sys:message content="${message}"/>	
		<div class="control-group">
			<label class="control-label">产品名称：</label>
			<div class="controls">
				<form:input path="productname" htmlEscape="false" maxlength="50" readonly="true" class="span4 required"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>

			<div class="control-group">
				<label class="control-label">线路名称：</label>
				<div class="controls">
					<select id="line" name="tLine.lineid" class="span4 required" onchange="chgname(this.options[this.options.selectedIndex].text)">
						<option value="">请选择</option>
						<c:forEach items="${lineList}" var="line">
							<option data-cargotypeid="${line.cargotype.cargotypeid }"
								data-typename="${line.cargotype.typename }"
								data-departcitySiteid="${line.departcity.siteid }"
								data-departcitySiteName="${line.departcity.sitename }"
								data-destcitySiteid="${line.destcity.siteid }"
								data-destcitySiteName="${line.destcity.sitename }"
								value = "${line.lineid}" ${tRentgroup.tLine.lineid == line.lineid?"selected":"" }>
								${line.linename }
							</option>
						</c:forEach>
					</select>
					<span class="help-inline"><font color="red">*</font></span>
				</div>
			</div>

		<div class="control-group">
			<label class="control-label">出发地：</label>
			<div class="controls">
				<input type="hidden" id="departcityId" name="departcity.siteid"/>
				<input type="text" id="departcityName" name="departcity.sitename" value="${tRentgroup.tLine.departcity.sitename }" readonly class="span4"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">目的地：</label>
			<div class="controls">
				<input type="hidden" id="destcityId" name="destcity.siteid"/>
				<input type="text" id="destcityName" name="destcity.sitename" value="${tRentgroup.tLine.destcity.sitename }" readonly class="span4"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">车型报价：</label>
			<div class="controls">
				<table id="contentTable"
					class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th class="hide"></th>
							<th>车型</th>
							<th>一口价</th>
							<th>可乘人数</th>
							<th id="types2">行李数</th>
							<th width="10">&nbsp;</th>
						</tr>
					</thead>
					<tbody id="productList">
					</tbody>
						<tfoot>
							<tr>
								<td colspan="5"><input 
									onclick="addRow('#productList', productRowIdx, productTpl);productRowIdx = productRowIdx + 1;"
									class="btn" type="button" value="新增"/> 
									<span class="help-inline">共</span> 
									<input class="span1" id="productnum" name="productnum" readonly="readonly"
									value="${productnum}" /> <span class="help-inline">条</span></td>
							</tr>
						</tfoot>
				</table>
				<script type="text/template" id="productTpl">
						<tr id="productList{{idx}}">
							<td class="hide">
								<input id="productList{{idx}}_id" name="productList[{{idx}}].id" type="hidden" {{if row}}value="{{row.id}}"{{/if}} />
								<input id="productList{{idx}}_delFlag" name="productList[{{idx}}].delFlag" type="hidden" value="0"/>
							</td>
							<td>
								<select id="productList{{idx}}_cargotype" name="productList[{{idx}}].cargotype.cargotypeid" class="input-medium"  onchange="keypress(this.options[this.options.selectedIndex].value,'#productList{{idx}}')">  
								</select>
							</td>
							<td>
								<input id="productList{{idx}}_suitrtnprice"
								name="productList[{{idx}}].suitrtnprice" type="text" class="span2 required money" 
								{{if row}}value="{{row.suitrtnprice}}"{{/if}}  />
							</td>
						    <td>					
								<input id="productList{{idx}}_seats" name="productList[{{idx}}].seats" 
								type="text" class="span2" readonly 
								{{if row}}value="{{row.seats}}"{{/if}} />
							</td>
						    <td>					
								<input id="productList{{idx}}_packs" name="productList[{{idx}}].packs" 
								type="text" class="span2"  readonly 
								{{if row}}value="{{row.packs}}"{{/if}} />
							</td>
							<td class="text-center" width="10">
								<span class="close" onclick="delRow(this, '#productList{{idx}}','#productList')" title="删除">&times;</span>
							</td>
						</tr>
					</script>
				<script type="text/javascript">

					</script>
			</div>
		</div>
		<div class="form-actions">
			<shiro:hasPermission name="rentproduct:tRentgroup:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<button class="btn" type="button" onclick="history.go(-1)">返回</button>
		</div>
	</form:form>
</body>
</html>